@model IColumn
@{
    var containerId = Model.Name + "_Container";
    var valueGetter = new HtmlString("@(Model." + Model.Name + ")");
}
<tr>
    <th>@(string.IsNullOrEmpty(Model.Label) ? Model.Name : Model.Label)</th>
    <td>
        <div id="@containerId" class="mediafile">
            <input id="@Model.Name" name="@Model.Name" type="hidden" value='@valueGetter' data-bind="value:fieldValue" @Html.Raw(Kooboo.CMS.Form.Html.ValidationExtensions.GetUnobtrusiveValidationAttributeString(Model)) />
            @Html.ValidationMessageForColumn(Model, new Dictionary<string, object>())
            <ul class="clearfix" data-bind="foreach:data">
                <!-- ko if: isImage -->
                <li class="img">
                    <span class="preview"></span>
                    <a class="action" data-bind="click: $parent.removeItem">@@Html.IconImage("minus small")</a>
                    <img data-bind="attr:{src:Url}" height="100" width="100">
                </li>
                <!-- /ko -->
                <!-- ko ifnot: isImage -->
                <li>
                    <span class="left" data-bind="{text:FileName}"></span>
                    <a class="action right" data-bind="click: $parent.removeItem">@@Html.IconImage("minus small")</a>
                </li>
                <!-- /ko -->
            </ul>
            <a class="action add" href='@("@")Url.Action("Selection", ViewContext.RequestContext.AllRouteValues().Merge("page",null).Merge("Controller", "MediaContent").Merge("FolderName", null))")'>@@Html.IconImage("plus small")</a>
            @Html.Raw(FormHelper.Tooltip(Model.Tooltip))
        </div>
        <script>
            $(function () {
                function MediaFile_ViewModel(initValue) {
                    var self = this;
                    function getFileName(url) {
                        return _.last(url.split('/'));
                    }
                    function isImage(url) {
                        return /.jpg$|.png$|.gif$|.bmp$|.jpeg$/i.test(url);
                    }
                    var items = [];
                    _.each(initValue.split('|'), function (item) {
                        if (item != '') {
                            items.push({ Url: item, FileName: getFileName(item), isImage: isImage(item) });
                        }
                    });
                    self.data = ko.observableArray(items);
                    self.data.sort();
                    self.removeItem = function () {
                        self.data.remove(this);
                    };
                    self.addItem = function (url, fileName) {
                        if (_.findWhere(self.data(), { Url: url }) == undefined) {
                            self.data.push({ Url: url, FileName: fileName, isImage: isImage(url) });
                            self.data.sort();
                        }
                    };
                    self.fieldValue = ko.computed(function () {
                        var urls = [];
                        _.each(this.data(), function (item) {
                            urls.push(item.Url);
                        });
                        return urls.join('|');
                    }, this);
                }
                var mediaFileViewModel = new MediaFile_ViewModel('@valueGetter');
                var mediaFileTemplate = $('#@containerId');
                ko.applyBindings(mediaFileViewModel, mediaFileTemplate[0]);

                mediaFileTemplate.find('a.add').click(function (e) {
                    e.preventDefault();
                    var $mediaLink = $(this);

                    $mediaLink.pop({
                        popupOnTop: true,
                        width: 700,
                        height: 500,
                        onclose: function () {
                            setTimeout(function () {
                                if ($.popContext.getCurrent() != null) {
                                    $.popContext.getCurrent().find('iframe').height('100%');
                                }
                            }, 16);
                        },
                        onload: function (currentHandle, pop, config) {
                            var iframe = pop.children('iframe'),
                            iframeSrc = iframe[0].contentWindow.document.location.href;
                            if (iframeSrc == 'about:blank') {
                                return false;
                            }
                            top.onFileSelected = function (src, text, option) {
                                mediaFileViewModel.addItem(src, text);
                            };
                        }
                    }).click();
                });
            });
        </script>
    </td>

</tr>
